import React, { Component } from 'react';

class TheTime extends Component {
    state = {
        hour: "00",
        minute: "00",
        second: "00",
    }
    set_hour = (e) => {
      this.setState({
        hour: e.target.value,
      })
      this.props.setTime(e.target.value + ":" + this.state.minute + ":" + this.state.second)
    }
    set_minute = (e) => {
      this.setState({
        minute: e.target.value,
      })
      this.props.setTime(this.state.hour + ":" + e.target.value + ":" + this.state.second)
    }
    set_second = (e) => {
      this.setState({
        second: e.target.value,
      })
      this.props.setTime(this.state.hour + ":" + this.state.minute + ":" + e.target.value)
    }
    setZeroTime = () => {
        this.setState({
            hour: "00",
            minute: "00",
            second: "00",
        })
        this.props.setTime("00:00:00");
    }
    confirm = () => {
        this.props.setShow(false)
        this.props.setTime(this.state.hour + ":" + this.state.minute + ":" + this.state.second)
    }
    render() {
        const hours = []
        for(let i = 0;i < 24; i++) {
            if(i < 10) {
                hours[i] = "0" + i;
            } else {
                hours[i] = "" + i;
            }
        }
        const minutes = []
        for(let i = 0;i < 60; i++) {
            if(i < 10) {
                minutes[i] = "0" + i;
            } else {
                minutes[i] = "" + i;
            }
        }
        return (
            <div>
                { this.props.isShow ? (<div>
                <select value={this.state.hour} onChange={this.set_hour}>
                { hours.map(n => {
                    return <option value={n} key={n}>{n}</option>
                })}
                </select>
                <select value={this.state.minute} onChange={this.set_minute}>
                { minutes.map(n => {
                    return <option value={n} key={n}>{n}</option>
                })}
                </select>
                <select value={this.state.second} onChange={this.set_second}>
                { minutes.map(n => {
                    return <option value={n} key={n}>{n}</option>
                })}
                </select>
                <button onClick={this.setZeroTime}>清零</button>
                <button onClick={this.confirm}>确定</button>
                </div>) : null}
            </div>
        )
    }
}

export default TheTime;
